<template>
  <div id="dialogPubWorkVideo">
    <el-dialog
      title="发布长视频"
      :visible.sync="dialogData.isShow"
      width="600px"
      top="20px"
      :before-close="labelHandleClose"
    >
      <div class="video-face-box">
        <videoFace :vid="vid"></videoFace>
      </div>
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="选择学院" prop="categoryId">
            <el-select
              v-model="ruleForm.categoryId"
              filterable
              placeholder="选择学院"
              :disabled="isEdit"
            >
              <el-option
                v-for="item in collegeList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择马甲" prop="userId">
            <el-select
              v-model="ruleForm.userId"
              filterable
              placeholder="请选择马甲"
              :disabled="ruleForm.canRobotRandom === true || isEdit"
              clearable
            >
              <el-option
                v-for="item in vestList"
                :key="item.robotId"
                :label="item.robotName"
                :value="item.robotId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="随机马甲">
            <el-switch
              v-model="ruleForm.canRobotRandom"
              :active-value="true"
              :inactive-value="false"
              active-color="#1DC8A4"
              :disabled="isEdit"
              @change="changeRandom(ruleForm.canRobotRandom)"
            ></el-switch>
          </el-form-item>
          <el-form-item label="视频标题" prop="title">
            <el-input
              class="vid-title"
              v-model="ruleForm.title"
              :maxlength="dialogData.titleLength"
              show-word-limit
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item label="视频内容" prop="content">
            <el-input
              v-model="ruleForm.content"
              type="textarea"
              :maxlength="dialogData.contentLength"
              show-word-limit
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布时间" prop="releaseDate">
            <el-date-picker
              v-model="ruleForm.releaseDate"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              :disabled="isEdit"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单部分 -->
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!isEdit" type="success" plain @click="cancelLabel"
          >取 消</el-button
        >
        <el-button
          v-if="!isEdit"
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
        <el-button v-if="isEdit" type="success" @click="cancelLabel"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import videoFace from '@common/videoFace'
import {
  sysNormalDisable,
  getVestList,
  getRandomRobotId
} from '@utils/dictionariesFunc'
import {
  pubVideo,
  getDetail,
  editVideo
} from '@/api/longVidManagement/videoBatch'
import { getVestDetail } from '@/api/vestManagement/vestManage' // 接口
export default {
  msg: '长视频批量维护-编辑弹窗',
  props: ['dialogData'],
  components: {
    videoFace
  },
  data() {
    return {
      loading: false,
      vid: '',
      id: '',
      isEdit: false,
      type: 'MOVIE', //发布类型
      collegeList: [], // 学院数据
      vestList: [{ robotId: '', robotName: '- 请选择马甲 -' }], // 选择马甲
      ruleForm: {
        categoryId: '', // 学院
        userId: '', // 马甲id
        canRobotRandom: true, //是否为随机马甲，为true的话系统后端默认随机一个马甲
        title: '', // 视频内容
        content: '', // 视频内容
        releaseDate: '' //发布时间
      },
      rules: {
        categoryId: { required: true, message: '请选择学院' },
        userId: {},
        title: {
          required: true,
          message: '视频标题不能为空',
          trigger: 'change'
        },
        content: {},
        releaseDate: {
          required: true,
          message: '发布时间不能为空',
          trigger: 'blur'
        }
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  watch: {
    'ruleForm.canRobotRandom': {
      // 监听随机马甲
      handler(newValue, oldValue) {
        if (newValue === true) {
          // 随机马甲启用
          this.rules.userId = {}
        } else {
          // 随机马甲关闭
          this.rules.userId = { required: true, message: '请选择马甲' }
        }
      },
      deep: true
    }
  },
  computed: {
    dapengUserId() {
      return this.$store.state.user.dapengUserId
    }
  },
  mounted() {
    this.getStatusList()
    this.vid = this.dialogData.params.vid
    if (this.dialogData.id) {
      //编辑-查看详情
      this.id = this.dialogData.id
      this.isEdit = true
      this.getFormDetail()
    } else {
      this.ruleForm.title = this.dialogData.params.title
    }
  },
  methods: {
    /* 获取筛选条件 */
    async getStatusList() {
      // 学院
      this.collegeList = await sysNormalDisable('sys_college')
      this.ruleForm.categoryId = this.collegeList[0].dictValue
      // 马甲
      let data1 = await getVestList(this.dapengUserId)
      this.vestList = this.vestList.concat(data1)
    },
    /* 改变随机马甲按钮状态 */
    changeRandom(status) {
      if (status === true) {
        // 启用随机马甲
        if (this.vestList.length === 0) {
          this.$message({
            message: '马甲列表为空，无法选择随机马甲',
            type: 'error'
          })
          this.ruleForm.canRobotRandom = true
        }
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
      this.dialogData.id = ''
    },
    /*获取表单详情*/
    getFormDetail() {
      getDetail(this.id, (res) => {
        let _this = this
        let {
          releaseDate,
          releaseEntry: { categoryId, title, userId, content }
        } = res
        if (res.changeUserId !== this.dapengUserId) {
          //编辑者不是发布者本人
          getVestDetail(userId, (res) => {
            let obj = {
              robotId: res.robotId,
              robotName: res.robotNickname
            }
            _this.vestList.push(obj)
          })
        }
        this.ruleForm = {
          categoryId,
          userId,
          content,
          releaseDate,
          title,
          canRobotRandom: false
        }
      })
    },
    /* 确认提交 */
    async confirmLabel(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true
          let {
            releaseDate,
            categoryId,
            content,
            userId,
            title
          } = this.ruleForm
          let params = {
            releaseDate,
            releaseEntry: {
              categoryId,
              title,
              content,
              userId,
              vid: this.vid
            },
            type: this.type
          }
          if (this.ruleForm.canRobotRandom === true) {
            params.releaseEntry.userId =
              (await getRandomRobotId(this.dapengUserId)) || ''
          }
          pubVideo(
            params,
            (response) => {
              this.sucCallBack()
            },
            (response) => {
              this.errCallBack(response)
            }
          )
        } else {
          return false
        }
      })
    },
    sucCallBack() {
      this.$emit('refresh')
      this.cancelLabel()
      this.loading = false
    },
    errCallBack(response) {
      this.loading = false
      this.$message({
        message: '编辑失败，' + response.message,
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="less">
#dialogPubWorkVideo {
  @import url('~@common/style/textarea.less');
  .el-dialog__body {
    padding-top: 10px !important;
  }
  .video-face-box {
    width: 500px;
    height: 350px;
    margin: 0 auto 10px;
  }
  .vid-title {
    .el-input__inner {
      padding-right: 45px;
    }
  }
}
</style>
